<template>
    <view class>
        <maskCom ref="child"></maskCom>
        <view @click="downloadFun" class="btnBox downloadBox" id="xxl">下载APP看完整内容</view>
        <view class="flex" style="margin-right: 30rpx;margin-left:30rpx; padding-top: 80rpx;">
            <view class v-if="avatar">
                <u-avatar :src="avatar" shape="circle" size="55"></u-avatar>
            </view>

            <view class style="width: 80%;">
                <view class style="font-size: 36rpx;color: #a8a8a8;">{{ name }}</view>
                <view class="flex" style="margin:20rpx 0 ;margin-right: 30rpx;">
                    <view class style="font-size: 26rpx;color: #a8a8a8;">{{ time }}</view>

                    <view class style="font-size: 26rpx;color: #a8a8a8;">浏览量{{ views}}</view>
                </view>

                <view class="contents" style="font-size: 40rpx;">{{ content }}</view>

                <view class="flexFS" style="margin-top: 20rpx;">
                    <u-album :urls="media_urls"></u-album>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import maskCom from '@/components/maskCom.vue'
import { getInfo } from '@/api/index.js'
export default {
    components: {
        maskCom,
    },
    data() {
        return {
            title: 'Hello',
            counting: false,
            array: [],
            index: 0,
            // url: 'https://api2.miaiy.com/v1/client/config/country_code',
            isShowProgress: false,
            progress: 0,
            registerSuccess: false,
            type: '',
            id: '',
            avatar: '',
            name: '',
            time: '',
            content: '',
            views: '',
            media_urls: [],
            datas: {},
            param: {},
        }
    },
    onLoad(e) {
        this.getData(this.$route.query.id)
    },
    mounted() {
        if (this.$route.path.indexOf('short') != -1) {
            this.param.creation_type = 'short'
        } else if (this.$route.path.indexOf('long') != -1) {
            this.param.creation_type = 'long'
        } else if (this.$route.path.indexOf('infomation') != -1) {
            this.param.creation_type = 'infomation'
        }
        this.param.creation_id = this.$route.query.id
        let that = this
        setTimeout(() => {
            ULink([
                {
                    id: 'usr11jeqgs9gdsoj',
                    data: that.param,
                    selector: '#xxl',
                    // timeout: 2000,
                    // useOpenInBrowerTips: 'default',
                    useOpenInBrowerTips: 'default',
                    lazy: true,
                    auto: false,
                },
            ])
        }, 100)
    },
    methods: {
        async getData(id) {
            let that = this
            try {
                const res = await getInfo(id)
                uni.hideLoading()
                // that.dataList = res.data
                if (res.code == 200) {
                    console.log(res.data)
                    that.datas = res.data
                    that.avatar = res.data.author.avatar
                    that.name = res.data.author.name
                    that.time = res.data.created_at
                    that.content = res.data.content
                    that.views = res.data.viewed
                    that.media_urls = res.data.media_urls
                } else {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                    })
                }
                // 保存数据
            } catch (err) {
                uni.hideLoading()
                console.log(err)
            }
        },
        imgBoxFun() {
            window.close() //关闭
        },

        downloadFun() {
            this.$refs.child.downloadFun()
        },
    },
}
</script>

<style scoped>
.btnBox {
    width: 80%;
    height: 90rpx;
    border-radius: 45rpx;
    background-color: #ff1c6d;
    line-height: 90rpx;
    text-align: center;
    color: white;
    margin: 0 auto;
}

.flex {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    /* overflow: hidden; */
}

.downloadBox {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 500rpx;
    z-index: 999;
}

.imgBox {
    position: absolute;
    left: 50rpx;
    top: 35rpx;
}

.imgBJ {
    width: 100vw;
    height: 100vh;
    position: fixed;
    /* background-color: #FF1C6D; */
    opacity: 0.4;
}

.img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
    overflow: hidden;
}

.contents {
    margin-right: 20rpx;
    font-size: 26rpx;
    color: #333333;
    height: 2em;
    /* 设置容器的高度，超过一行的高度 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    white-space: nowrap;
    /* 不换行 */
}
</style>